<template>
    <div class="plane-layout">
        <div class="plane-layout-bottom">
            <div class="plane-layout-bottom-left">
                <div class="plane-layout-bottom-left-top">
                    <Title title="土壤含水量"></Title>
                    <div class="plane-layout-bottom-left-top-box">
                        <chart :option="leftChart1"></chart>
                    </div>
                </div>
                <div class="plane-layout-bottom-left-bottom">
                    <Title title="田间持水量"></Title>
                    <div class="plane-layout-bottom-left-bottom-box">
                        <chart :option="leftChart2"></chart>
                    </div>
                </div>
            </div>
            <div class="plane-layout-bottom-right">
                <img src="@/images/bg.png" alt="">
            </div>
        </div>
        <div class="plane-layout-top">
            <Title title="数据筛选"></Title>
            <div class="plane-layout-top-list">
                <div class="plane-layout-top-list-item">
                    <div class="plane-layout-top-list-item-button">筛选</div>
                </div>
                <div class="plane-layout-top-list-item">
                    <div class="plane-layout-top-list-item-icon">
                        <img src="@/images/layout/nav5.png" alt="">
                    </div>
                    <div class="plane-layout-top-list-item-text">土壤含水量</div>
                    <div class="plane-layout-top-list-item-input">
                        <el-select v-model="state.value1">
                            <el-option v-for="(v, k) in state.options" :key="k" :value="v.label"
                                :label="v.label"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="plane-layout-top-list-item">
                    <div class="plane-layout-top-list-item-icon">
                        <img src="@/images/layout/nav5.png" alt="">
                    </div>
                    <div class="plane-layout-top-list-item-text">田间持水量</div>
                    <div class="plane-layout-top-list-item-input">
                        <el-select v-model="state.value1">
                            <el-option v-for="(v, k) in state.options" :key="k" :value="v.label"
                                :label="v.label"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="plane-layout-top-list-item">
                    <div class="plane-layout-top-list-item-icon">
                        <img src="@/images/layout/nav5.png" alt="">
                    </div>
                    <div class="plane-layout-top-list-item-text">萎蔫系数</div>
                    <div class="plane-layout-top-list-item-input">
                        <el-select v-model="state.value1">
                            <el-option v-for="(v, k) in state.options" :key="k" :value="v.label"
                                :label="v.label"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="plane-layout-top-list-item">
                    <div class="plane-layout-top-list-item-icon">
                        <img src="@/images/layout/nav5.png" alt="">
                    </div>
                    <div class="plane-layout-top-list-item-text">重力势</div>
                    <div class="plane-layout-top-list-item-input">
                        <el-select v-model="state.value1">
                            <el-option v-for="(v, k) in state.options" :key="k" :value="v.label"
                                :label="v.label"></el-option>
                        </el-select>
                    </div>
                </div>
                <div class="plane-layout-top-list-item">
                    <div class="plane-layout-top-list-item-icon">
                        <img src="@/images/layout/nav5.png" alt="">
                    </div>
                    <div class="plane-layout-top-list-item-text">基膜势</div>
                    <div class="plane-layout-top-list-item-input">
                        <el-select v-model="state.value1">
                            <el-option v-for="(v, k) in state.options" :key="k" :value="v.label"
                                :label="v.label"></el-option>
                        </el-select>
                    </div>
                </div>
            </div>
            <div class="plane-layout-top-search">
                <el-input v-model="state.value2" placeholder="名称、ID、关键词搜索">
                </el-input>
                <img src="@/images/search.png" alt="">
            </div>
        </div>
        <div class="plane-layout-table">
            <cusTable :data="state.tableData"></cusTable>
        </div>

    </div>
</template>
<script setup lang="ts">
import { reactive } from 'vue'
import Title from './components/common/title.vue'
import chart from '@/components/echarts-box.vue'
import { leftChart1, leftChart2 } from './plane'
import cusTable from '@/components/cusTable.vue'
const state = reactive({
    options: [
        { label: '全部' }
    ],
    value1: '全部',
    value2: '',
    value3: '全部',
    value4: '全部',
    tableData: [
        { A: '水稻', B: '水稻土', C: "1098", D: "22", E: 12, F: 103, G: -0.73, H: 329, I: 11.25, J: 2711, K: '2022-05-25' },
        { A: '大豆', B: '盐碱土', C: "1465", D: "359", E: 29, F: 92, G: 0.12, H: 373, I: 11.24, J: 2830, K: '2018-07-01' },
        { A: '玉米', B: '黑土', C: "1149", D: "56", E: 28, F: 120, G: -0.24, H: 383, I: 10.25, J: 2430, K: '2019-02-22' },
        { A: '小麦', B: '水稻土', C: "1288", D: "74", E: 26, F: 105, G: -0.69, H: 129, I: 10.05, J: 2456, K: '2020-11-07' },
        { A: '红薯', B: '黑土', C: "1274", D: "12", E: 15, F: 56, G: -0.23, H: 432, I: 14.25, J: 2126, K: '2021-01-25' },
        { A: '萝卜', B: '黑土', C: "1384", D: "54", E: 16, F: 15, G: 0.5, H: 312, I: 12.15, J: 2097, K: '2021-05-05' },
        { A: '白菜', B: '盐碱土', C: "1102", D: "33", E: 21, F: 44, G: 0.44, H: 345, I: 12.21, J: 2671, K: '2020-04-07' },
        { A: '葡萄', B: '盐碱土', C: "1246", D: "16", E: 28, F: 123, G: -0.29, H: 366, I: 14.35, J: 2655, K: '2018-03-15' },
        { A: '水晶草', B: '盐碱土', C: "1306", D: "92", E: 29, F: 83, G: -0.13, H: 312, I: 11.05, J: 2813, K: '2019-05-21' },
        { A: '大麦', B: '水稻土', C: "1098", D: "262", E: 33, F: 43, G: -0.73, H: 341, I: 11.25, J: 2721, K: '2022-06-25' },

    ]
})
</script>
<style lang="less">
.plane-layout {
    .el-select {
        .el-input {
            .el-input__wrapper {
                background: #08395E !important;
                border-radius: 4px !important;
                border: none !important;
                box-shadow: inset 2px 2px 4px rgba(1, 101, 160, 0.5), inset -2px -2px 4px rgba(1, 101, 160, 0.8) !important;

                .el-input__inner {
                    color: #fff !important;
                }
            }
        }
    }
}

.plane-layout-top-search {
    .el-input {
        .el-input__wrapper {
            background: #08395E !important;
            border-radius: 30px !important;
            border: none !important;
            box-shadow: inset 2px 2px 4px rgba(1, 101, 160, 0.5), inset -2px -2px 4px rgba(1, 101, 160, 0.8) !important;

            .el-input__inner {
                color: #fff !important;
            }
        }
    }
}
</style>
<style lang="less" scoped>
.plane-layout {
    width: 100%;
    height: 130%;
    display: flex;
    flex-direction: column;
    padding: 20px;

    &-top {
        height: 114px;
        margin-bottom: 18px;
        background: url(@/images/border.png) no-repeat;
        background-size: calc(100% + 20px) 100%;
        background-position-x: -20px;
        position: relative;

        &-search {
            position: absolute;
            top: 10px;
            right: 80px;
            width: 300px;
            border-radius: 30px;

            img {
                width: 20px;
                object-fit: cover;
                position: absolute;
                top: 50%;
                right: 20px;
                transform: translateY(-50%);
            }
        }

        &-list {
            display: flex;
            margin: 20px 4px 0;
            justify-content: space-around;

            &-item {
                display: flex;
                align-items: center;

                &-icon {
                    img {
                        width: 23px;
                        object-fit: cover;
                    }
                }

                &-text {
                    font-size: 12px;
                    font-family: Microsoft YaHei;
                    font-weight: 400;
                    color: #E6E6E6;
                    margin: 0 20px;
                }

                &-input {
                    width: 140px;
                    height: 34px;
                    ;
                }

                &-button {
                    padding: 4px 25px;
                    color: #fff;
                    font-size: 14px;
                    background: rgba(1, 101, 160, 0.5);
                    border-radius: 4px;
                    box-shadow: inset 2px 2px 4px rgba(1, 101, 160, 0.5), inset -2px -2px 4px rgba(1, 101, 160, 0.8);
                }
            }
        }
    }

    &-bottom {
        height: 800px;
        display: flex;

        &-left {
            width: 675px;
            margin-right: 20px;
            display: flex;
            flex-direction: column;

            &-top,
            &-bottom {
                flex: 1;
                padding: 4px;
                margin-top: 8px;
                background: url(@/images/border.png) no-repeat;
                background-size: 100% 100%;
                display: flex;
                flex-direction: column;

                &-box {
                    flex: 1;
                }
            }

            &-top {
                margin-top: 4px;
                margin-bottom: 20px;
            }

            &-bottom {
                margin-bottom: 4px;
            }
        }

        &-right {
            flex: 1;
            background: url(@/images/border.png) no-repeat;
            background-size: 100% 100%;
            padding: 20px;

            img {
                width: 100%;
                height: 100%;
                ;
            }
        }
    }

    &-table {
        flex: 1;
        overflow: hidden;
    }
}</style>